<template>
  <div class="container">
    <!-- 页头 -->
    <div class="header">
      <router-link to="/home">
        <a-space>
          <span>直接访问</span>
          <home-outlined/>
        </a-space>
      </router-link>
    </div>
    <!-- 页脚 -->
    <a-space class="footer">
      <CopyrightOutlined/>
      <a href="https://beian.miit.gov.cn/" target="_blank">
        皖ICP备2021006363号
      </a>
      <MailOutlined/>
      <span>heshuang6571@163.com</span>
      <GithubOutlined/>
      <a href="https://gitee.com/zaimokuza/cetacea-blog-vue3-ui" target="_blank">
        项目源码
      </a>
    </a-space>
    <!-- 主体 -->
    <div class="box">
      <div class="notes">
        <span class="notes_title">{{ notes.title }}</span>
        <span class="notes_content">{{ notes.content }}</span>
      </div>
      <div class="main">
        <div class="main_header">
          <div class="main_header_item" :class="{'active':isActive==='login'}" @click="isActive='login'">登录</div>
          |
          <div class="main_header_item" :class="{'active':isActive==='register'}" @click="isActive='register'">注册</div>
        </div>
        <div class="main_form">
          <div v-if="isActive==='login'" class="login_form">
            <a-form :model="loginUser" :wrapper-col="{span: 22, offset: 1}">
              <a-form-item v-bind="loginValidateInfos.phone">
                <a-input v-model:value="loginUser.phone" :maxlength="11" placeholder="请输入手机号">
                  <template #prefix>
                    <phone-outlined/>
                  </template>
                </a-input>
              </a-form-item>
              <a-form-item v-bind="loginValidateInfos.password">
                <a-input v-model:value="loginUser.password" :maxlength="20" placeholder="请输入密码" type="password">
                  <template #prefix>
                    <lock-outlined/>
                  </template>
                </a-input>
              </a-form-item>
              <a-form-item>
                <a-button class="submit_button" type="primary" @click.prevent="loginSubmit">登录</a-button>
              </a-form-item>
            </a-form>
          </div>
          <div v-if="isActive==='register'" class="register_form">
            <a-form :model="registerUser" :wrapper-col="{span: 22, offset: 1}">
              <a-form-item v-bind="registerValidateInfos.name">
                <a-input v-model:value="registerUser.name" :maxlength="10" placeholder="请输入昵称，长度为2-10位">
                  <template #prefix>
                    <user-outlined/>
                  </template>
                </a-input>
              </a-form-item>
              <a-form-item v-bind="registerValidateInfos.phone">
                <a-input v-model:value="registerUser.phone" :maxlength="11" placeholder="请输入手机号">
                  <template #prefix>
                    <phone-outlined/>
                  </template>
                </a-input>
              </a-form-item>
              <a-form-item v-bind="registerValidateInfos.password">
                <a-input v-model:value="registerUser.password" :maxlength="20" placeholder="请输入密码，长度为5-20位"
                         type="password">
                  <template #prefix>
                    <lock-outlined/>
                  </template>
                </a-input>
              </a-form-item>
              <a-form-item v-bind="registerValidateInfos.rePassword">
                <a-input v-model:value="registerUser.rePassword" :maxlength="20" placeholder="请重复密码"
                         type="password">
                  <template #prefix>
                    <lock-outlined/>
                  </template>
                </a-input>
              </a-form-item>
              <a-form-item>
                <a-button class="submit_button" type="primary" @click.prevent="registerSubmit">注册</a-button>
              </a-form-item>
            </a-form>
          </div>
        </div>
        <div class="main_footer">
          <router-link to="/home">
            <a-space>
              <span>直接访问</span>
              <home-outlined/>
            </a-space>
          </router-link>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { defineComponent, getCurrentInstance, reactive, toRefs } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useStore } from 'vuex'
import {
  CopyrightOutlined,
  GithubOutlined,
  HomeOutlined,
  LockOutlined,
  MailOutlined,
  PhoneOutlined,
  UserOutlined
} from '@ant-design/icons-vue'
import { useForm } from '@ant-design-vue/use'
import { Login, Register } from '@/service/user'
import { nameRegex, passwordRegex, phoneRegex } from '@/utils/regex'

export default defineComponent({
  setup: function () {
    const { proxy } = getCurrentInstance()
    const route = useRoute()
    const router = useRouter()
    const store = useStore()
    const state = reactive({
      notes: {
        title: '今日闲话',
        content: '孤独的鲸鱼最后一次有记载的录音是2004年，已经从声音里听到了苍老，频率也由52赫兹降低到50赫兹。' +
          '它不断地歌唱去寻求伴侣和朋友，却始终没有共鸣和回应，永远活在自己的世界里，它失去了伴侣和同伴，' +
          '只能自己默默地遨游在这浩瀚的海洋，直到有一天筋疲力尽，最终还是在孤独中老去。'
      },
      isActive: 'login',
      loginUser: {
        phone: '',
        password: ''
      },
      loginUserRules: {
        phone: [{
          required: true,
          message: phoneRegex.messageRequire
        }, {
          trigger: 'blur',
          pattern: phoneRegex.pattern,
          message: phoneRegex.message
        }],
        password: [{
          required: true,
          message: passwordRegex.messageRequire
        }, {
          trigger: 'blur',
          pattern: passwordRegex.pattern,
          message: '密码格式不正确'
        }]
      },
      registerUser: {
        name: '',
        phone: '',
        password: '',
        rePassword: ''
      },
      registerUserRules: {
        name: [{
          required: true,
          message: nameRegex.messageRequire
        }, {
          trigger: 'blur',
          pattern: nameRegex.pattern,
          message: nameRegex.message
        }],
        phone: [{
          required: true,
          message: phoneRegex.messageRequire
        }, {
          trigger: 'blur',
          pattern: phoneRegex.pattern,
          message: phoneRegex.message
        }],
        password: [{
          required: true,
          message: passwordRegex.messageRequire
        }, {
          trigger: 'blur',
          pattern: passwordRegex.pattern,
          message: passwordRegex.message
        }],
        rePassword: [{
          trigger: 'blur',
          validator: (rule, value, callback) => {
            // eslint-disable-next-line standard/no-callback-literal
            value === state.registerUser.password ? callback() : callback(false)
          },
          message: '两次输入密码不一致'
        }]
      }
    })

    const methods = reactive({
      loginSubmit: async () => {
        const { outOfDate } = await loginUserValidate.validate()
        if (outOfDate === false) {
          return
        }
        const user = await Login(state.loginUser)
        await store.dispatch('submitUser', user)
        const { path } = route.params
        if (path) {
          await router.push(path)
        } else {
          await router.push('/home')
        }
      },
      registerSubmit: async () => {
        const { outOfDate } = await registerUserValidate.validate()
        if (outOfDate === false) {
          return
        }
        await Register(state.registerUser)
        proxy.$message.success('注册成功！')
        state.isActive = 'login'
      }
    })

    const loginUserValidate = useForm(state.loginUser, state.loginUserRules)
    const registerUserValidate = useForm(state.registerUser, state.registerUserRules)

    return {
      ...toRefs(state),
      ...toRefs(methods),
      loginValidateInfos: loginUserValidate.validateInfos,
      registerValidateInfos: registerUserValidate.validateInfos
    }
  },
  components: {
    UserOutlined,
    PhoneOutlined,
    LockOutlined,
    GithubOutlined,
    MailOutlined,
    CopyrightOutlined,
    HomeOutlined
  }
})
</script>

<style lang="less" scoped>
.container {
  background-image: url("../assets/background-login.jpg");
  background-size: 100% 90%;
  background-repeat: no-repeat;
  background-position-y: center;
  background-color: #00000005;
  height: 100vh;
  min-height: 800px;
}

.header {
  position: relative;
  padding: 0 20px;
  top: 0;
  width: 100%;
  height: 5%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.footer {
  position: relative;
  top: 90%;
  width: 100%;
  height: 5%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.box {
  width: 790px;
  height: 500px;
  border-radius: 3px;
  position: relative;
  left: 50%;
  top: 45%;
  transform: translate(-50%, -50%);
  display: flex;
}

.notes {
  width: 340px;
  height: 500px;
  padding: 40px;
  font-size: 16px;
  color: white;
  position: relative;
  background: #00000040;
  display: flex;
  flex-direction: column;

  & .notes_title {
    margin-top: 40px;
    font-size: 20px;
    font-weight: 700;
  }

  & .notes_content {
    margin-top: 20px;
    font-size: 14px;
    line-height: 35px;
  }
}

.main {
  width: 450px;
  height: 500px;
  position: relative;
  padding: 30px 0;
  background-color: #fff;
  border: 1px solid #fff;
  display: flex;
  flex-direction: column;
  align-items: center;

  & .main_header {
    width: 40%;
    font-size: 20px;
    font-weight: 700;
    display: flex;
    justify-content: space-around;
    align-items: center;

    & .main_header_item {
      padding: 10px;

      &:hover {
        cursor: pointer;
        border-bottom: 2px solid #1da57a;
      }
    }

    & .active {
      color: #1da57a;
      border-bottom: 2px solid #1da57a;
    }
  }

  & .main_form {
    width: 100%;
    padding: 30px;

    .ant-input {
      font-size: 16px;
    }

    .submit_button {
      width: 300px;
      height: 40px;
      left: 50%;
      transform: translate(-50%);
    }

    & .login_form {
      margin-top: 60px;

      .ant-form-item {
        margin-bottom: 40px;
      }

      .ant-input-affix-wrapper {
        font-size: 22px;
      }

      .submit_button {
        top: 30px;
      }
    }

    & .register_form {
      margin-top: 30px;

      .ant-form-item {
        margin-bottom: 20px;
      }

      .ant-input-affix-wrapper {
        font-size: 18px;
      }

      .submit_button {
        top: 20px;
      }
    }

  }

  & .main_footer {
    display: none;
  }
}

:global(.login_form .ant-form-explain) {
  position: absolute;
  font-size: 15px;
  line-height: 2;
}

:global(.register_form .ant-form-explain) {
  position: absolute;
  line-height: 1.5;
}

@media screen and (max-width: 1000px) {
  .container {
    background-image: none;
    background-color: #00000000;
    height: 100vh;
    min-height: 0;
  }

  .box {
    width: 100%;
    top: 0;
    transform: translate(-50%, 0);
    justify-content: center;
  }

  .main {
    & .main_footer {
      display: block;
    }
  }

  .header, .notes, .footer {
    display: none;
  }

}

</style>
